<template>
    <div class="login-container">
        <div class="login-wrapper">
             <div class="title-wrapper text-center clearfix">
                <img src="https://dummyimage.com/90x90/ff0000/fff" alt="logo" class="fl title-img">
                <div class="title fl text-center">运管系统</div>
             </div>
            <el-form :label-position="labelPosition" :rules="rules" label-width="116px"  ref="loginForm" :model="loginForm" class="login-form">
                <div class="login-form-inner">

                    <el-form-item label="帐号" prop="username">
                        <el-input v-model="loginForm.username"></el-input>
                    </el-form-item>

                    <el-form-item label="密码" prop="password">
                        <el-input v-model="loginForm.password" type="password"></el-input>
                    </el-form-item>
                    <div class="submit-wrapper" @click="login('loginForm')">
                        <div class="submit-inner">
                        </div>
                    </div>
                </div>
                <el-form-item label="">
                    <el-checkbox v-model="loginForm.checked">记住密码</el-checkbox>
                    <div class="fr forget-password">
                        <router-link to="/"> 忘记密码?</router-link>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                labelPosition: 'right',
                loginForm: {
                    username: '',
                    password: '',
                    checked: false
                },
                // 校验规则
                rules: {
                    username: [{
                        required: true,
                        message: '请输入用户名',
                        trigger: 'blur'
                    },
                    {
                        min: 1,
                        max: 10,
                        message: '长度在 1 到 10 个字符',
                        trigger: 'blur'
                    }
                    ],
                    password: [{
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    }]
                }
            }
        },
        methods: {
            // 登陆函数，校验表单通过则将用户信息保存到store
            login: function (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        const userInfo = {
                            loginName: this.loginForm.username,
                            password: this.loginForm.password
                        }
                        this.$store.dispatch('login', userInfo).then((res) => {
                            sessionStorage.userInfo = JSON.stringify(userInfo)
                            if (this.loginForm.checked) {
                                localStorage.userInfo = JSON.stringify(userInfo)
                            }
                            this.$router.replace('/')
                        }).catch(err => {
                            console.log(err)
                        })
                    }
                })
            }
        }

    }

</script>
<style>
.login-container {
        height: 100%;
        width: 100%;
        background: #fff;
    }
.login-container .login-wrapper{
     color: #959595;
}

    .login-wrapper {
        position: relative;
        top: 25%;
        margin: 0 auto;
        width: 480px;
    }
    .title-wrapper {
        width: 200px;
        margin: 0 auto;
    }
    .title-inner{

    }
    .title-img {
        height: 42px;
        width: 42px;
        border-radius: 50%;
    }
    .title-wrapper .title {
        font-size: 30px;
        color: #959595;
        padding-left: 22px;
    }
    .login-form {
        padding-top: 106px;
    }
    .login-form-inner {
        position: relative;
    }
    .submit-wrapper {
        position: absolute;
        right: -8px;
        top: 0px;
        height: 112px;
        width: 100px;
        background: transparent;
    }

    .submit-inner {
        background: url("../../../assets/login-submit.png") no-repeat;
        background-size: contain;
        height: 100%;
        width: 100%;
    }
    .forget-password{
        padding-right:56px;
    }
    .login-form-inner label{
        letter-spacing: 16px;
    }
</style>
